<!doctype! html>
<html>
	<head>
		<title>EAST Text Detection Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" type="text/css">
		<link rel="stylesheet" href="/static/css/app.css" type="text/css">

		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/tether/1.4.0/js/tether.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
		<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<form id="upload-form" method="post" enctype="multipart/form-data">
					<h5>EAST Text Detection Demo</h5>
					<div class="form-content-container">
						<input id="upload_images" type="file" name="image" />
						<input id="upload_button" type="submit" value="Submit" />
					</div>
				</form>
			</div>
			<hr>
			<div id="result">
<!--                <div class="item">-->
<!--                    <div>Input image</div>-->
<!--                    <img :src="input_image_url">-->
<!--                </div>-->
				<div class="item">
					<div>Result</div>
					<ul>
						<li>
							<img id="result-image" :src="result_image_url">
						</li>
					</ul>
				</div>
				<div class="item">
					<div>Runtime parameters</div>
					<div>
						<ul>
							<li v-for="(val, key) in rtparams">
							{% raw %}{{ key }}: {{ val }}{% endraw %}
							</li>
						</ul>
					</div>
				</div>
				<div class="item">
					<div>Timing</div>
					<div>
						<ul>
							<li v-for="(val, key) in timing">
							{% raw %}{{ key }}: {{ val }}{% endraw %}
							</li>
						</ul>
					</div>
				</div>
				<div class="item">
					<div>Text Lines</div>
					<div>
						<ul>
							<li> {% raw %}{{ text_lines.length }}{% endraw %} text lines </li>
							<li v-for="tl in text_lines">
							{% raw %}{{ tl }}{% endraw %}
							</li>
						</ul>
					</div>
				</div>

				<div class="item">
					<div>Host Info</div>
					<div>
						<ul>
							<li>
							<details>
								<summary>/proc/cpuinfo</summary>
								<pre>{% raw %}{{ cpuinfo }}{% endraw %}</pre>
							</details>
							</li>
							<li>
							<details>
								<summary>/proc/meminfo</summary>
								<pre>{% raw %}{{ meminfo }}{% endraw %}</pre>
							</details>
							<li>
							<details>
								<summary>/proc/loadavg</summary>
								<pre>{% raw %}{{ loadavg }}{% endraw %}</pre>
							</details>
							</li>
							</li>
						</ul>
					</div>
				</div>

				<div class="item">
					<div>JSON</div>
					<ul>
						<li>
						<a :href="result_json_url">{% raw %}{{ result_json_url }}{% endraw %}</a>
						</li>
					</ul>
				</div>

			</div>
			<hr>
			<footer>
				<div>This is a demo for the paper: <a href="https://arxiv.org/abs/1704.03155v2">EAST: An Efficient and Accurate Scene Text Detector</a> at CVPR 2017</div>
				<div>Github repo for this demo: <a href="https://github.com/argman/EAST">https://github.com/argman/EAST</a></div>
			</footer>
			<a href="https://github.com/argman/EAST"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
		</div>

		<script>
			$(function() {
				function getQueryStrings() {
					var vars = [], hash, hashes;
					if (window.location.href.indexOf('#') === -1) {
						hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
					} else {
						hashes = window.location.href.slice(window.location.href.indexOf('?') + 1, window.location.href.indexOf('#')).split('&');
					}
					for(var i = 0; i < hashes.length; i++) {
						hash = hashes[i].split('=');
						vars.push(hash[0]);
						vars[hash[0]] = hash[1];
					}
					return vars;
				}

				var session_id = '{{session_id}}';

				var app = new Vue({
					el: '#app',
					data: {
						session_id: session_id,
						text_lines: [],
						rtparams: {},
						timing: {},
						cpuinfo: '',
						meminfo: '',
						loadavg: '',
					},
					computed: {
						input_image_url: function() { return '/static/results/' + this.session_id + '/input.png'; },
						result_image_url: function() { return '/static/results/' + this.session_id + '/output.png'; },
						result_json_url: function() { return '/static/results/' + this.session_id + '/result.json'; },
					},
				});

				var render = function(session_id) {
					app.session_id = session_id;
					app.text_lines = ['loading'];
					$.get('/static/results/' + session_id + '/result.json', function(data) {
						if (typeof data == 'string') {
							data = JSON.parse(data);
						}
						app.text_lines = data.text_lines;
						app.rtparams = data.rtparams;
						app.timing = data.timing;
						app.cpuinfo = data.cpuinfo
						app.meminfo = data.meminfo
						app.loadavg = data.loadavg
					});
				}

				if (session_id != 'dummy_session_id') {
					window.history.pushState({},"", '/?r=' + session_id);
					render(session_id);
				} else {
					var queryStrings = getQueryStrings();
					var rid = queryStrings['r'];
					if (rid) {
						render(rid);
					}
				}

			})

		</script>

	</body>
</html>
